<template>
  <div class="" v-if="dateValue?.length">
    <el-date-picker
      v-model="dateValue"
      placeholder="选择时间"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      range-separator="至"
      @change="changeTime"
      :format="format"
      :shortcuts="shortcuts"
      :disabled-date="disabledDate"
      :clearable="clearable"
      v-bind="$attrs"
    />
  </div>
</template>

<script lang="ts" setup>
import moment from "moment"; //导入文件
import { ref, reactive } from "vue";
import { disableTime } from "@/utils/index";

const temp: number = new Date().getTime() - 60 * 60 * 24 * 1000 * 6;
const end: string = new Date().toLocaleDateString().replace(/\//g, "-");
const start: string = new Date(temp).toLocaleDateString().replace(/\//g, "-");

const dateValue = ref<[string, string]>([start, end]);
// console.log("dateValue-- 默认时间-------", dateValue.value);

const YEAR = moment().year();
const MONTHS = moment().month();
const DAY = moment().date();
// console.log("YEAR----", `${YEAR}-${MONTHS}-${DAY}`);

const props = defineProps({
  disabledDate: {
    type: Function,
    default: disableTime,
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  format: {
    type: String,
    default: "YYYY-MM-DD",
  },
  utcType: {
    type: Boolean,
    default: false,
  },
});

const { utcType } = toRefs(props);

const shortcuts = [
  {
    text: "今天",
    value: () => {
      let now = new Date().getTime();
      const start = moment(now).startOf("day");
      return [start, start];
    },
  },
  {
    text: "昨天",
    value: () => {
      const tempTime = new Date().getTime() - 3600000 * 24;
      const start = moment(tempTime).startOf("day");
      return [start, start];
    },
  },
  {
    text: "过去7天",
    value: () => {
      const nowT = new Date().getTime() - 3600000 * 24;
      const tempTime = nowT - 3600000 * 24 * 6;
      const start = moment(tempTime).startOf("day");
      const end = moment(nowT).startOf("day");
      return [start, end];
    },
  },
  {
    text: "过去30天",
    value: () => {
      const nowT = new Date().getTime() - 3600000 * 24;
      const tempTime = nowT - 3600000 * 24 * 30;
      const start = moment(tempTime).startOf("day");
      const end = moment(nowT).startOf("day");
      return [start, end];
    },
  },
  {
    text: "过去3个月",
    value: () => {
      const nowT = new Date().getTime() - 3600000 * 24;
      const tempTime = nowT - 3600000 * 24 * 91;
      const start = moment(tempTime).startOf("day");
      const end = moment(nowT).startOf("day");
      return [start, end];
    },
  },
];

// 修改时间
const emit = defineEmits(["returnTime"]);
const changeTime = (val: any) => {
  let tempDate = val.map((item: any, index: number) => {
    // console.log("----选择时间----", moment(item).format("YYYY-MM-DDTHH:mm:ss"));

    let lastTime = Date.parse(item) + 24 * 3600000 - 1; // 当天结束时间 减1秒 得出 23:59:59秒
    /*
      utcType.value :是否是日期为 UTC 模式
      index == 1  组件结束时间使用 lastTime 进行计算
    */
    if (utcType.value) {
      item =
        index === 1
          ? moment(lastTime).utc().format("YYYY-MM-DDTHH:mm:ss")
          : moment(item).utc().format("YYYY-MM-DDTHH:mm:ss"); // .format("YYYY-MM-DD");
    } else {
      item =
        index === 1
          ? moment(lastTime).format("YYYY-MM-DDTHH:mm:ss")
          : moment(item).format("YYYY-MM-DDTHH:mm:ss"); // .format("YYYY-MM-DD");
    }
    return item;
  });
  // console.log("修改时间------", tempDate);
  emit("returnTime", tempDate);
};

defineExpose({
  dateValue,
  start,
  end,
});
</script>

<style scoped lang="scss"></style>
